var $dataInfo = $('#contactReportTable');//表单

$(function(){
    contactTableInit();//表单初始化
    contactLineInit();//折线图数据初识化
})

function echartClientRate(id,xdata,ydata0,ydata1,title_text,legend_data,y_name0,y_name1) {
    //客户分析转化表
    let clientRate=document.getElementById(id)
    let myChart = echarts.init(clientRate);
    line_option.xAxis[0].data = xdata
    line_option.series[0].data = ydata0
    //
    line_option.series[1].data = ydata1
    // line_option.series[2].data = ydata2
    line_option.title.text=title_text
    line_option.legend.data=legend_data
    line_option.series[0].name = y_name0
    line_option.series[1].name = y_name1
    // line_option.series[2].name = y_name2


    myChart.setOption(line_option);
    window.onresize = myChart.resize;
    /**/
}

//防止表头与表格不对齐
$(window).resize(function () {
    $dataInfo.bootstrapTable('resetView');
});

function contactTableInit(){
    //先销毁表格
    $dataInfo.bootstrapTable('destroy');
    $dataInfo.bootstrapTable({
        classes: 'table table-bordered table-hover table-striped',
        url: '/contact/getContactReportList',//请求地址
        method: 'post',//请求方式
        contentType: "application/x-www-form-urlencoded",//请求内容类型
        dataType: "json",//数据类型
        striped: true,//是否显示行间隔色
        sortable: true,//是否启用排序
        sortOrder: "desc",//排序方式
        sortName: 'createTm',//排序字段
        cache: false,//是否使用缓存
        showColumns: false,//显示隐藏列
        showRefresh: false,//显示刷新按钮
        showToggle: false,//切换显示样式
        showFooter: false,//显示Table脚部
        pagination: true,//是否显示分页
        showPaginationSwitch: false,//是否显示分页按钮
        clickToSelect: false,//是否启用点击选中行
        singleSelect: false,
        minimumCountColumns: 2,//最少要显示的列数
        undefinedText: '',//cell没有值时显示
        sidePagination: "server",//分页方式：client客户端分页，server服务端分页
        uniqueId: 'formId',
        idField: 'formId',
        pageSize: 10,//每页的记录行数
        pageNumber: 1,//初始化加载第1页，默认第1页
        pageList: "[5, 10, 15, 20]",//可供选择的每页的行数
        fixedColumns: true,     // 冻结列
        fixedNumber: 4,         // 左侧固定列
        queryParams: queryParams,//查询参数
        columns: [
            {title: '主键', field: 'customerId', visible: false},
            {title: '客户名称', field: 'customerName',align: 'left', valign: 'middle'},
            {title: '联系人数量', field: 'contactNum', align: 'left', valign: 'middle'},
            {title: '跟进次数', field: 'followNum', align: 'left', valign: 'middle'},
            {title: '平均占比', field: 'averageRate', align: 'left', valign: 'middle'}
        ],
        responseHandler: function (result) {
            if (result.code == "000000"){
                var obj = {
                    "rows": result.data,
                    "total": result.totalRecords//总条数
                };
            } else {
                var obj = {
                    "total": 0,
                    "rows": [],
                }
            }
            return obj;
        },
        onLoadSuccess: function () {
            //加载成功时执行
            $("[data-toggle='tooltip']").tooltip();//加这个是为了让操作列的提示图标显示在上方
        },
        onLoadError: function (status) {
            if (status == 403) {
                alert("权限不足！禁止访问！");
            } else {
                //加载失败时执行
                alert("加载失败！");
            }
        },
        formatLoadingMessage: function () {
            return "请稍等，加载中...";
        },
        formatNoMatches: function () {
            return '无符合条件的记录';
        },
    })
}


/**
 * 折线图查询参数
 */
function lineQueryParams() {
    var param = {};
    //搜索条件
    param.dateType = $("#dateType").val();
    param.bs = 1;
    return param;
}

/**
 * 普通查询参数
 */
function queryParams(params){
    params.pageIndex = (params.offset / params.limit) + 1;//页码
    params.pageSize = params.limit;//每页条数
    params.sortName = params.sort;//排序列命
    params.sortOrder = params.order;//排序规则
    params.dateType = $("#dateType").val();
    // params.bs = 1;  //0管理端 1用户端
    return params;
}



/**
 * 切换时间选项
 */
function selectTime(time) {
    if (time == 'week') {//本周
        $('.week').addClass('active-second');
        $('.thisMonth').removeClass('active-second');
        $('.lastMonth').removeClass('active-second');
        $('.recentlyThreeMonth').removeClass('active-second');
        $('.thisQuarter').removeClass('active-second');
        $('.year').removeClass('active-second');
        $("#dateType").val(1);
    }
    if (time == 'thisMonth') {//本月
        $('.thisMonth').addClass('active-second');
        $('.week').removeClass('active-second');
        $('.lastMonth').removeClass('active-second');
        $('.recentlyThreeMonth').removeClass('active-second');
        $('.thisQuarter').removeClass('active-second');
        $('.year').removeClass('active-second');
        $("#dateType").val(2);
    }
    if (time == 'lastMonth') {//上月
        $('.lastMonth').addClass('active-second');
        $('.week').removeClass('active-second');
        $('.thisMonth').removeClass('active-second');
        $('.recentlyThreeMonth').removeClass('active-second');
        $('.thisQuarter').removeClass('active-second');
        $('.year').removeClass('active-second');
        $("#dateType").val(3);
    }
    if (time == 'recentlyThreeMonth') {//近三月
        $('.recentlyThreeMonth').addClass('active-second');
        $('.week').removeClass('active-second');
        $('.thisMonth').removeClass('active-second');
        $('.lastMonth').removeClass('active-second');
        $('.thisQuarter').removeClass('active-second');
        $('.year').removeClass('active-second');
        $("#dateType").val(4);
    }
    if (time == 'thisQuarter') {//本季度
        $('.thisQuarter').addClass('active-second');
        $('.week').removeClass('active-second');
        $('.thisMonth').removeClass('active-second');
        $('.lastMonth').removeClass('active-second');
        $('.recentlyThreeMonth').removeClass('active-second');
        $('.year').removeClass('active-second');
        $("#dateType").val(5);
    }
    if (time == 'year') {//本年度
        $('.year').addClass('active-second');
        $('.week').removeClass('active-second');
        $('.thisMonth').removeClass('active-second');
        $('.lastMonth').removeClass('active-second');
        $('.recentlyThreeMonth').removeClass('active-second');
        $('.thisQuarter').removeClass('active-second');
        $("#dateType").val(6);
    }
    $dataInfo.bootstrapTable('refreshOptions', {pageNumber: 1,queryParams: queryParams});
    contactLineInit();//折线图数据初始化
}



/**
 * 折线图数据初始化
 */
function contactLineInit() {
    $.ajax({
        url: "/contact/getContactReportLine",
        async: true,
        data: lineQueryParams(),
        type: "POST",
        dataType: "json",
        success: function (result) {
            if(result.code == "000000"){
                // contactLine('contactLine',result.data);
                echartClientRate('contactLine',result.data.dataTimes,result.data.followTimes,result.data.newContacts,"跟进次数/新增联系人",["跟进次数","新增联系人"],"跟进次数","新增联系人")
            }
        },
        error: function (res){
            alert('请求失败')
        }
    })
}



/**
 * 折线图初始化
 */
function contactLine(id,data){
    let dom = document.getElementById(id);
    let myChart = echarts.init(dom);

    let option = {
        title: {
            text: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        legend: {
            data: data.type
        },
        xAxis: {
            type: 'category',
            data: data.dataTimes
        },
        yAxis: {
            type: 'value'
        },
        color: [
            '#5470c6', '#ee6666'
        ],
        series: [
            {
                name: '跟进次数',
                type: 'line',
                data: data.followTimes
            },
            {
                name: '新增联系人',
                type: 'line',
                data: data.newContacts
            }
        ]
    };

    myChart.setOption(option);
    window.addEventListener("resize",function(){
        myChart.resize();
    });
}


const color = ['#6699ff',"#52cca3", '#caed8b']
var line_option={
    title: {
        text: '新增客户/成交客户',
        left: '2%',
        top: '3%',
        textStyle: {
            color: '#999999',
            fontSize: '12',
        },
    },
    tooltip: {
        trigger: 'axis',
        extraCssText: 'font-size:14px;line-height:24px;color:#fff;background:#212947;opacity: 0.9;padding:10px 20px;box-shadow:0 0 3px rgba(0, 0, 0, 0.2)',
        formatter: function(params) {
            let html = `<span style="">${params[0].axisValue}</span>`
            params.forEach(v => {
                html += `<div>

<span style="display:inline-block;color: #999999;margin-right:5px;border-radius:10px;width:10px;height:10px;border: 2px solid #FFFFFF;background-color:${color[v.componentIndex]};"></span>
${v.seriesName}

<span style="color:${color[v.componentIndex]};font-size:18px;font-weight:700;padding-left: 10px;">${v.value}</span>`
            })
            return html
        }
    },
    legend: {
        data: ['新增客户', '成交客户'],
        top: '0%',
        right: '2%',
        // textStyle: {
        //     fontSize:16,
        //     color: '#8597c1'
        // }
    },

    xAxis: [{
        show: true,
        type: 'category',
        axisLine: {
            show: true,
            lineStyle:{
                color:'rgba(83, 83, 83,0.1)',
            },


        },
        axisTick:{//坐标轴刻度相关设置。
            show: false,
        },
        splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
                color: '#f00'
            },
        },
        axisLabel: {
            color: '#999999',
            margin:20
        },
        splitLine: {
            show: false
        },
        boundaryGap: false,
        data: [],

    }],
    grid: {

        left:'5%',
        right:"5%",
        borderWidth: 1
    },
    yAxis: [{
        name:'',
        type: 'value',
        min: 0,
        // max: 140,
        splitNumber: 4,
        splitLine: {
            //分隔线
            show: false,
            lineStyle: {
                //坐标轴在 grid 区域中的分隔线。
                color: 'rgba(83, 83, 83,0.1)'
            }
        },
        axisLine: {
            //坐标轴轴线相关设置
            show: true,
            lineStyle:{
                color:'rgba(83, 83, 83,0.1)',
            },
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#999999',
            },
            margin:20
        },
        axisTick: {
            show: false,
        },
    }],
    series: [{
        name: '新增客户',
        type: 'line',
        smooth: true, //是否平滑
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        lineStyle: {
            normal: {
                color: "#6699ff",
                width:0,
            },
        },
        itemStyle: {
            color: "#6699ff",
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(102, 153, 255, .8)' //rgba(61, 127, 255, 1) //rgba(106, 142, 216, .5)
                },
                    {
                        offset: 1,
                        color: 'rgba(102, 153, 255, .8)'
                    }
                ], false),
                shadowColor: 'rgba(102, 153, 255, 0.9)',
                shadowBlur: 20
            }
        },
        data: [ ]
    },
        {
            name: '成交客户',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: false,
            symbol: 'circle',
            symbolSize: 2,
            lineStyle: {
                normal: {
                    color: "#52cca3",
                    width:0,
                },
            },
            itemStyle: {
                color: "#52cca3",
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(82, 204, 163, .8)'
                    },
                        {
                            offset: 1,
                            color: 'rgba(82, 204, 163,.8)'
                        }
                    ], false),
                    shadowColor: 'rgba(82, 204, 163, 0.9)',
                    shadowBlur: 20
                }
            },
            data: [ ]
        },


        {
            name: '成交客户111',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: false,
            symbol: 'circle',
            symbolSize: 2,
            lineStyle: {
                normal: {
                    color: "#B5EA55",
                    width:0,
                },
            },
            itemStyle: {
                color: "#B5EA55",
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(181, 234, 85, .5)'
                    },
                        {
                            offset: 1,
                            color: 'rgba(181, 234, 85, .5)'
                        }
                    ], false),
                    shadowColor: 'rgba(181, 234, 85, .9)',
                    shadowBlur: 20
                }
            },
            data: [ ]
        },

    ]
};
